<template>
  <a-modal
    title="采购订单"
    width="70%"
    :visible="visible"
    :confirmLoading="loading"
    okText="选择"
    @ok="handleChoose"
    @cancel="
      () => {
        this.visible = false
      }
    "
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input v-model="Name" placeholder="订单编号\采购订单名称\供货单位名称" allowClear />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button
              type="primary"
              @click="
                () => {
                  this.pagination.current = 1
                  this.getDataList()
                }
              "
              >查询</a-button
            >
            <a-button style="margin-left: 8px" @click="react()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      :scroll="{ y: scroll }"
      :columns="columns"
      :rowKey="row => row.Id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: type, columnWidth: 50 }"
      :bordered="true"
      size="small"
    >
      <template slot="dataIndex" slot-scope="text, record, index">
        <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
      </template>
      <template slot="Type" slot-scope="text">
        <enum-name code="SupplierType" :value="text"></enum-name>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'aId',
    scopedSlots: { customRender: 'dataIndex' },
    width: '50px'
  },
  { title: '订单编号', dataIndex: 'Code' },
  { title: '采购订单名称', dataIndex: 'Name' },
  { title: '供货单位名称', dataIndex: 'SuppName' },
  {
    title: '采购日期',
    dataIndex: 'PurchaseDate',
    customRender: text => {
      return text ? text.substring(0, 10) : ''
    }
  }
]
export default {
  props: {
    type: { type: String, default: 'radio', required: false },
    id: { type: String, required: false, default: '' }
  },
  components: {
  },

  data() {
    return {
      Name: '',
      data: [],
      pagination: {
        current: 1,
        pageSize: 25,
        pageSizeOptions: ['25', '50', '100'],
        showSizeChanger: true,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: 'CreateTime', order: 'desc' },
      loading: false,
      columns,
      queryParam: [],
      selectedRowKeys: [],
      selectedRows: [],
      visible: false
    }
  },
  computed: {
    scroll() {
      return Number(document.documentElement.clientHeight) * 0.45
    }
  },
  methods: {
    handleTableChange(pagination, filters) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.getDataList()
    },
    getDataList() {
      this.selectedRowKeys = []
      this.selectedRows = []
      // this.queryParam.InStorageId = this.id
      this.queryParam = [ {
        Condition: 'Name',
        Keyword: this.Name
      }]
      this.loading = true
      this.$http
        .post('/PB/pb_purchase/GetRecePurchaseArrivalDataList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam,
          ...this.filters
        })
        .then(resJson => {
          this.loading = false
          this.data = resJson.Data
          if (resJson.Success) {
            const pagination = { ...this.pagination }
            pagination.total = resJson.Total
            this.pagination = pagination
          }
        })
    },
    react(){
      this.Name = ''
      this.queryParam = []
      this.getDataList()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    openChoose() {
      this.queryParam = []
      this.getDataList()
      this.visible = true
    },
    handleChoose() {
      this.visible = false
      this.$emit('onChoose', this.selectedRows)
    }
  }
}
</script>
